import { ref, reactive } from "vue";
import { Inventory } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getPageReport } from "@/api/modules/reporting";
import { formatDate } from "@/utils/date-formatter";
import type { TableColumnCtx } from "element-plus";
import { defineComponent } from "vue";

export default defineComponent({
  setup(): () => JSX.Element {
    const proTable = ref<ProTableInstance>();

    // 新建默认数据
    const initData = reactive({
      reportId: 107,
      // appointType: 1
      isManage: true
    });

    const columns: ColumnProps<Inventory.ResCustomList>[] = [
      {
        type: "index",
        label: "序号",
        width: 80,
        search: {
          el: "date-picker",
          label: "日期",
          minWidth: 164,
          key: "dataTimeRange",
          defaultValue: [formatDate(-6, "start", "yyyy-MM-dd"), formatDate(0, "end", "yyyy-MM-dd")],
          props: {
            type: "datetimerange",
            format: "YYYY-MM-DD",
            valueFormat: "YYYY-MM-DD"
          }
        }
      },
      {
        sortable: true,
        prop: "time",
        label: "餐/时段",
        search: {
          el: "select",
          defaultValue: 1,
          key: "appointType"
        },
        fieldNames: { label: "label", value: "value" },
        enum: [
          { label: "时段", value: 1 },
          { label: "餐段", value: 2 }
        ],
        isFilterEnum: false
      },
      {
        sortable: true,
        prop: "amount",
        label: "营业额"
      },
      // {
      //   sortable: true, prop: "companyAmount",
      //   label: "较昨天营业额"
      // },
      {
        sortable: true,
        prop: "allAmount",
        label: "营业收入"
      },
      // {
      //   sortable: true, prop: "companyAllAmount",
      //   label: "较昨天营业收入"
      // },
      {
        sortable: true,
        prop: "orderCount",
        label: "订单数量"
      },
      // {
      //   sortable: true, prop: "compareOrderCount",
      //   label: "较昨天订单数量"
      // },
      {
        sortable: true,
        prop: "person",
        label: "用餐人数"
      },
      // {
      //   sortable: true, prop: "comparePerson",
      //   label: "较昨天用餐人数"
      // },
      {
        sortable: true,
        prop: "reduceAmount",
        label: "优惠金额"
      }
      // {
      //   sortable: true, prop: "compareReduceAmount",
      //   label: "较昨天优惠"
      // }
      // { sortable: true, prop: "storeName", label: "门店名称", minWidth: 120, align: "left" }
    ];

    // 合计
    interface SummaryMethodProps<T = any> {
      columns: TableColumnCtx<T>[];
      data: T[];
    }
    const summary = ref<any[]>([]);
    const dataCallback = (data: any) => {
      // console.log(data);
      summary.value = data.summary;
      return {
        list: data.list,
        total: data.total,
        pageNum: data.pageNum,
        pageSize: data.pageSize
      };
    };

    const getSummaries = (param: SummaryMethodProps) => {
      return summary.value;
    };

    return () => (
      <div class="table-box">
        <ProTable
          ref={proTable}
          title="历史账单"
          row-key="id"
          columns={columns}
          request-api={getPageReport}
          init-param={initData}
          summary-method={getSummaries}
          data-callback={dataCallback}
        >
          {{
            // 插槽
            companyAmount: ({ row }) => <div>{row.companyAmount ? row.companyAmount : "--"}</div>
          }}
        </ProTable>
      </div>
    );
  }
});
